<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签位置</div>
      <div class="w-3/4">
        <a-radio-group
          v-model:value="lowCode!.globalConfig!.labelPosition"
          button-style="solid"
          option-type="button"
          :options="[
            { label: '水平', value: 'horizontal' },
            { label: '垂直', value: 'vertical' },
          ]"
        >
        </a-radio-group>
      </div>
    </div>
    <!-- <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签宽度</div>
      <div class="w-3/4">
        <el-input-number
          v-model.number="lowCode!.globalConfig!.labelWidth"
          :min="1"
          :max="200"
        />
      </div>
    </div> -->
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">尺寸控制</div>
      <div class="w-3/4">
        <a-radio-group
          v-model:value="lowCode!.globalConfig!.size"
          option-type="button"
          button-style="solid"
          :options="[
            { label: 'large', value: 'large' },
            { label: 'default', value: 'default' },
            { label: 'small', value: 'small' },
          ]"
        >
        </a-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">弹框配置</div>
      <div class="w-3/4">
        <a-button type="primary" @click="selectDialog">编辑</a-button>
      </div>
    </div>

    <!-- 选择编辑弹框 -->
    <a-modal
      :footer="null"
      v-model:visible="dialogVisible"
      width="50%"
      title="弹框编辑"
    >
      <a-table
        :dataSource="dialogCollection"
        :columns="columns"
        style="width: 100%"
      >
        <template #bodyCell="{ column, text, record }">

          <template v-if="column.dataIndex == 'action'"> 
            <a-button type="link" size="small" @click="dialogEditor(record)"
            >编辑</a-button
          >
          <a-popconfirm
            title="你确认要删除这个?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="dialogRemove(record)"
          >
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
          </template>

        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject, computed, toRefs, reactive } from "vue";
import { LowCodeImp } from "@/components/low-code/core/type";
import { Component } from "@/components/low-code/core/index";

export default defineComponent({
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;

    const columns = [
      { title: "弹框标题", dataIndex: "title", key: "title" },
      { title: "弹框别名", dataIndex: "alias", key: "alias" },
      { title: "操作", dataIndex: "action", key: "action" },
    ];

    const dialogVisible = ref(false);
    const dialogCollection = computed(() => {
      let list: any[] = [];
      Object.values(lowCode.dataCenter).map((dialog) => {
        if ((<Component>dialog).component == "Modal") {
          list.push({
            title: (<Component>dialog).componentProps.title,
            alias: (<Component>dialog).componentProps.alias,
            key: (<Component>dialog).key,
          });
        }
      });
      return list;
    });
    const selectDialog = () => {
      Object.values(lowCode.dataCenter).map((dialog) => {
        (<Component>dialog).componentProps.visible = false;
      });
      dialogVisible.value = true;
    };
    const dialogEditor = (row: any) => {
      let com = lowCode.dataCenter[row.key] as Component;
      dialogVisible.value = false;
      com.componentProps.visible = true;
      lowCode.setcurrentKey(com.key);
    };
    const dialogRemove = (row: any) => {
      let index = lowCode.domTree.items.findIndex(
        (com: { key: any }) => com.key == row.key
      );
      lowCode.domTree.items.splice(index, 1);
      lowCode.removeComponent(row.key);
    };

    return {
      lowCode,
      dialogVisible,
      dialogCollection,
      selectDialog,
      dialogEditor,
      dialogRemove,
      columns,
    };
  },
});
</script>

<style scoped></style>
